<template>
    <div>
      <div ref="chartRef" style="width: 700px; height:350px"></div>
    </div>
  </template>
  <script lang="ts">
import { defineComponent, ref, Ref, onMounted } from 'vue';
import { useECharts } from '/@/hooks/web/useECharts';
export default defineComponent({
  props: {
    rowdata: {
      type: Array as PropType<Array>,
      default: [],  // 设置默认值
    },
    title: {
      type: String as PropType<string>,
      default: '',  // 设置默认值
    },
    title1: {
      type: String as PropType<string>,
      default: '',  // 设置默认值
    },
  },
  setup(props) {
    const chartRef = ref<HTMLDivElement | null>(null);
    const { setOptions, resize, echarts, getInstance } = useECharts(
      chartRef as Ref<HTMLDivElement>,
    );
    onMounted(() => {
      initchart()
    })
    function initchart() {
      setOptions({
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            // Use axis to trigger tooltip
            type: 'shadow' // 'shadow' as default; can also be 'line' or 'shadow'
          }
        },
        legend: {},
        grid: {
          left: '5%',
          right: '5%',
          bottom: '3%',
          containLabel: true
        },
        graphic: [
          {
            type: 'text',
            id: 'mainTitle',
            left: 'left',
            top: 10,
            style: {
              text: props.title,
              fill: '#333',
              fontSize: 20,
              fontWeight: 'bold',
              textAlign: 'center'
            }
          },
          {
            type: 'text',
            id: 'subTitle',
            left: 0,
            top: 40,
            style: {
              text: props.title1,
              fill: '#999',
              fontSize: 12,
              textAlign: 'center'
            }
          },
        ],
        xAxis: {
          type: 'value',
          axisLine:{
            show:true
          },
          axisTick:{
            show:true
          }
        },
        yAxis: {
          type: 'category',
          data: props.rowdata[0],
        },
        series: [
          {
            name: '已澄清',
            type: 'bar',
            stack: 'total',
            label: {
              show: false
            },
            itemStyle: {
              color: "#B34138"
            },
            emphasis: {
              focus: 'series'
            },
            data: props.rowdata[1]
          },
          {
            name: '部分澄清',
            type: 'bar',
            stack: 'total',
            label: {
              show: false
            },
            itemStyle: {
              color: "#344453"
            },
            emphasis: {
              focus: 'series'
            },
            data: props.rowdata[2]
          },
          {
            name: '未澄清',
            type: 'bar',
            stack: 'total',
            label: {
              show: false
            },
            itemStyle: {
              color: "#709EA6"
            },
            emphasis: {
              focus: 'series'
            },
            data: props.rowdata[3]
          },
        ],
        toolbox: {
          right: "5%",
          top: "20px",
          feature: {
            dataView: {},
            restore: {},
            saveAsImage: {},
          },
        },
      })
    }
    return {
      chartRef,
      initchart
    }
  }
})
  </script>
  <style scoped lang=less>
.index2 {
    width: 100%;
    height: 100%;
    background: #fff;
  }
</style>